/*slide*/
div.mySlide {
    /*background-color: rgba(149,204,255,0.74);*/
    padding: 0 !important;
    /*margin: 0 !important;*/
    /*margin-top: -10rem;*/
    position: relative;
    top: -10vw;
}

div.mySlide * {
    z-index: -1;
}

/*content*/
div.myContent {
    /*margin:-10vw 100px 0 0;*/
    margin-top: -10vw;
    padding: 2rem;
}

div.myContent a {
    display: block;
    color: black;
    font-size: 1px;
    background-color: transparent;
    transition: background-color 1s 0s ease-in;
    padding: 0.5rem;
}

div.myContent a:hover {
    background-color: #dff2f6;
    transition: background-color 1s 0s ease-out;
}

div.myContent li {
    margin: 0 2rem;
}

div.myContent div:has(> a.nav-link) {

}

div.myContent div:has(> a.nav-link) div {
    position: absolute;
    transition: all 1s 0s ease;
    background-color: lightblue;
}

div.myContent div:has(> a.nav-link):hover div:nth-child(odd) {
    height: 100%;
}

div.myContent div:has(> a.nav-link):hover div:nth-child(even) {
    width: 100%;
}

/*左右格式*/
div.myContent div:has(> a.nav-link) div:nth-child(odd) {
    height: 0;
    width: 2px;
}

/*上下格式*/
div.myContent div:has(> a.nav-link) div:nth-child(even) {
    height: 2px;
    width: 0;
}

div.myContent div:has(a.nav-link) div.lineTop {
    /*background: rgba(255, 0, 0, 0.5);*/
    top: 0;
    left: 0;
    /*    width: 100%;
        height: 2px;*/
}

div.myContent div:has(a.nav-link) div.lineRight {
    /*background: rgba(0, 0, 255, 0.5);*/
    right: 0;
    top: 0;
    /*    height: 100%;
        width: 2px*/
}

div.myContent div:has(a.nav-link) div.lineBottom {
    /*background: rgba(0, 0, 0, 0.5);*/
    bottom: 0;
    right: 0;
    /*    width: 100%;
        height: 2px*/
}

div.myContent div:has(a.nav-link) div.lineLeft {
    /*background: rgba(0, 255, 0, 0.5);*/
    left: 0;
    bottom: 0;
    /*    height: 100%;
        width: 2px*/
}
